<template>
  <div class="container">
    <el-card>
      <!-- @resetList="resetList" -->
      <SearchForm @search="search" @resetList="resetList"></SearchForm>
      <el-tabs v-model="activeName" type="card" :before-leave="beforeLeave">
        <el-tab-pane label="全部" name="first">
          <ChoiceTable :choiceList="choiceList" :total="total"></ChoiceTable>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <ChoiceTable :choiceList="choiceList" :total="total"></ChoiceTable>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <ChoiceTable :choiceList="choiceList" :total="total"></ChoiceTable>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <ChoiceTable :choiceList="choiceList" :total="total"></ChoiceTable>
        </el-tab-pane>
      </el-tabs>
      <div class="footer">
        <el-row type="flex" justify="end">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="page.pagesize"
            layout="prev, pager, next, sizes,jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import SearchForm from '../components/searchForm.vue'
import ChoiceTable from '../components/choice-table.vue'
import { choice } from '../../api/hmmm/questions'
import eventBus from '@/EventBus/eventBus.js'
export default {
  components: {
    SearchForm,
    ChoiceTable
  },
  data() {
    return {
      activeName: 'first',
      choiceList: [],
      page: {
        page: 1, // 当前页码
        pagesize: 5
      },
      total: 0
    }
  },
  created() {
    this.choice(this.page)
    // 审核或删除完毕后更新当前页面精选题库列表
    eventBus.$on('updateArticleList', () => {
      this.change(this.activeName)
    })
  },
  methods: {
    // 标签切换时触发的方法
    beforeLeave(activeName) {
      // 标签变化时，将页数重置到第一页
      this.page = {
        page: 1, // 当前页码
        pagesize: 5
      }
      this.change(activeName)
    },
    // 精选题库列表
    async choice(data) {
      const { data: res } = await choice(data)
      this.choiceList = res.items
      this.total = res.counts
      console.log(res, 7689)
    },
    // 封装一个方法，在tab项、当前页，以及每页条数发生变化时调用
    change(activeName, data) {
      if (activeName === 'first') {
        this.choice({ ...this.page, ...data })
      } else if (activeName === 'second') {
        this.choice({ ...this.page, chkState: 0, ...data })
      } else if (activeName === 'third') {
        this.choice({ ...this.page, chkState: 1, ...data })
      } else {
        this.choice({ ...this.page, chkState: 2, ...data })
      }
    },
    // 控制每页显示条数
    async handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.page.pagesize = val
      this.change(this.activeName)
      // const { data: res } = await choice(this.page)
      // this.choiceList = res.items
    },
    // 控制当前页
    async handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page.page = val
      this.change(this.activeName)
      // const { data: res } = await choice(this.page)
      // this.choiceList = res.items
    },
    // 搜索
    search(data) {
      console.log(data, 789)
      this.change(this.activeName, data)
    },
    resetList() {
      this.change(this.activeName)
    }
  }
}
</script>

<style scoped >
.footer {
  margin-top: 20px;
}
</style>
